<%@ page contentType="text/html; charset=gb2312" language="java" 

import="java.sql.*" errorPage="" %>
<jsp:directive.page import="java.util.List"/>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相册管理</title>
<script 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 

type="text/javascript"></script>
<script language="javascript" src="js/js.js" 

type="text/javascript"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style type="text/css">
  <!--a:link { text-decoration: none;}a:visited { text-decoration: none;}

a:hover { text-decoration: none;}a:active { text-decoration: none;}-->
  </style>
 
<style type="text/css">
<!--
.STYLE15 {font-family: "Courier New", Courier, monospace;
    font-size: 36px;
	color: #00FF00;
	font-style: italic;
	font-weight: bold;
}
.STYLE16 {font-size: 30px}
.STYLE6 {font-size: 15px; }
.STYLE17 {	font-size: 24px;
	color: #FF0000;
}
.STYLE21 {	font-size: 24px;
	font-weight: bold;
}
.STYLE10 {font-size: 14px}
.STYLE11 {font-size: 12px}
.STYLE2 {font-family: "宋体";
	font-size: 24px;
	font-weight: bold;
}


-->
</style>

<style type="text/css">
#preview_wrapper{        
    display:inline-block;        
    width:300px;        
    height:300px;        
    background-color:#CCC;        
}        
#preview_fake{ /* 该对象用户在IE下显示预览图片 */        
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(sizingMethod=scale);        
}        
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ 

       
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(sizingMethod=image);          
    visibility:hidden;        
}        
#preview{ /* 该对象用户在FF下显示预览图片 */        
    width:300px;        
    height:300px;        
}
</style>

<style type="text/css"> 
       	     .fil  {     
       	       width:300px; 
       	       }  
       	     .fieldset_img  {	
       	        border:1px solid blue;	
       	         width:500px;	
       	          height:400px;
       	         	 text-align:left; 
       	      } 
       	     .fieldset_img img  {   
       	         	   border:1px solid #ccc;	
       	         	    padding:2px;	 
       	         	    margin-left:5px;  } 
       	     #ImgList li   {    
       	         	     text-align:center;    
       	         	      list-style:none;	 display:block;	 

float:left;	 margin-left:5px;
       	     }
</style>  
<script type="text/javascript">
   //全局变量
     var br;
     var file;
     var img;
     var FileCount=1;  //上传文件总数
      //添加上传文件按钮 
     function showFile(obj) {  
 //   var filePath=$(obj).val(); 
    
     
      obj.select();      
       var filePath = document.selection.createRange().text;  
      //  alert("文件路径："+filePath);
      var FireFoxFileName="";  
      //FireFox文件的路径需要特殊处理  
      if(window.navigator.userAgent.indexOf("Firefox")!=-1) 
       {    
        FireFoxFileName=filePath;    
         filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
       }  
       if(!checkFile(filePath,FireFoxFileName)) 
       {   
         $(obj).prev().val("");   
          return;  
       }  
        if(filePath.length==0) 
        {   
        
         alert("请选择上传文件"); 
           return false;  
        }  
       var imgId="i"+FileCount;
        var showImg=document.getElementById(imgId);
        

showImg.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader

(sizingMethod = scale)";
        
        showImg.filters.item(        
           'DXImageTransform.Microsoft.AlphaImageLoader').src =filePath; 
           
       
          
      
          // var show2=document.getElementById("img2");
      //   show2.filters.item(        
     //      'DXImageTransform.Microsoft.AlphaImageLoader').src =filePath; 
           // autoSizePreview(show,0, 0 );  
             
           
            
             //   img1.filters.item(        
        //   'DXImageTransform.Microsoft.AlphaImageLoader').src =filePath; 
      }
      // 增加文件
      function addFile(){
      FileCount++; 
       br='<br id="b'+FileCount+'">';
      file='<input id="f'+FileCount+'" name="file" type="file" 

onchange="showFile(this)">';
      $("#fil").append(br);
      $("#fil").append(file);
      
      
      img='<img id="i'+FileCount+'" width="100" height="100" 

style="cursor:pointer;" onchange="">';
     imgdel='<a href="#" id="a'+FileCount+'" onclick="DelImg()">删除</a>'
       $("#ImgList").append(img);
        $("#ImgList").append(imgdel);
     //  $("#ImgList").append(br);
      }
     
//删除上传文件（file以及img）
function DelImg(){   
        
             var ID=FileCount;
             	 	 $("#f"+ID).remove();
             	 	 $("#b"+ID).remove();
             	 	 	 $("#i"+ID).remove();
             	 	 	 $("#a"+ID).remove();
             	 	 	 FileCount--;
             	 	 	 	 return false;
}  
            //检查上传文件是否重复,以及扩展名是否符合要求
 function checkFile(fileName,FireFoxFileName)
 { 
              var flag=true;
               $("#ImgList").find(":img").each(function(){
               	 if(fileName==$(this).attr("src"))	 {	
               	 	flag=false;		
               	 	if(FireFoxFileName!='')		{	
               	 		 alert('上传文件中已经存在

\''+FireFoxFileName+'\'!');	
               	    }		
                    else{		 
               	     alert('上传文件中已经存在\''+fileName+'\'!');	
               	    }		
                    return;	 
                  }
                }); 
               	    
     //文件类型判断 
     var str="jpg|jpeg|bmp|gif";
      var fileExtName=fileName.substring(fileName.indexOf(".")+1);
      //获取上传文件扩展名
       if(FireFoxFileName!='')//fireFox单独处理 
      {  
      fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf

(".")+1);
      } 
      //alert(fileExtName); 
      if(str.indexOf(fileExtName.toLowerCase())==-1)
       {   
       alert("只允许上传格式为jpg，jpeg，bmp，gif的文件。");
       	flag=false; 
       	} 
       	return flag;
 }  
    
function addMore(){
//    var d = document.getElementById("more");
//    var br= document.createElement("br");
  //  var file= document.createElement("input");
   var file='<input id="upload_img" type="file" />';
   // var button= document.createElement("input");
    
    var button='<input type="button" value="移除">';
       var br='<br/>';
  //  file.type="file";
    
    
  //  button.type = "button";
  //  button.value = "移除...";
    
  //  input.onchange=onUploadImgChange(this);
  
    button.onclick = function(){
    //  $("#more").remove(br);
   // $("#more").remove(file);
   //   $("#more").remove(button);
    }
   
 //   d.appendChild(br);
   // td.append(file);

   $("#more").append(br);
  
   $("#more").append(file);
    $("#more").append(br);
     $("#more").append(button);
    
}

function showPic(){


 var show=document.getElementById("show");
 var img=document.createElement("img");
 var br=docuement.createElement("br");
 
 
 
 
 show.appendChild(br);
 show.appendChild(img);



}    
</script>
</head>
<body style="background-color:#FFFFE1">

<div align="center">
        
        <table class="style1" width="1280" height="1024" 
            style="background-image: url('../img/yeaf.jpg'); background-

repeat: no-repeat"
            align="center">
            <tr>
                <td align="center" style="font-family: 楷体; font-size: 

large;height:70px;" width="34%" 
                    colspan="3">
                                   
                    
                    ${ user }</td>
            </tr>
            <tr>
                <td align="center" style="font-family: 楷体; font-size: 

large;height:60px;" width="20%">
                    <a href="myindexaction?me=${ user }" class="linka">我

的主页</a></td>
                <td align="center"style="font-family: 楷体; font-size:  

large;height:60px;" width="20%">
                    <a href="upfile.jsp" class="linka">我的相册</a></td>
                <td align="center"style="font-family: 楷体; font-size:  

large;height:60px;" width="60%">
                   <a href="selectfriendaction?me=${ user }" 

class="linka">管理中心</a></td>
            </tr>
     	<tr>
     		<td width="40%"></td>
       		<td height="120" align="center" valign="top">          

			     <table width="525" border="0">
		         <tr>     
		            <p>上传图片:<br>
		 <div id="fil" class="fil">   
		 <input id="f1" name="file" type="file"  

onchange="showFile(this)">
		<!-- input id="f2" name="f0" type="file" 

style="display:none" onchange="showFile(this)" -->   
		</div> 
		   <input type="button" value="添加" onClick="addFile

(this)"/> 
		   </p>
		   <div id="ok">
		   <fieldset class="fieldset_img">
		   <legend>图片展示</legend>
		   <ul id="ImgList">
		   <li>
		   <div id="show">
		   <img id="i1"  width="100" height="100" 

style="cursor:pointer;" >
		    <a href="#" id="a1" onclick="DelImg()">删除</a>
		    <!--img id="img2"   width="100" height="100" 

style="cursor:pointer;display:none;" -->
		   </div>
		  
		   </li>
		   </ul>
		   </fieldset>
		   </div>  
		
		           <td height="20">&nbsp;</td>
		           
		         </tr>         
		       </table>	   
	

       </td>
     </tr>
		</table>
	</div>


</body>
</html>
